<template>
  <!-- 一键呼叫模块 -->
  <div class="OneClickCalling">
    <div class="title">
      <Title> 一键呼叫 </Title>
    </div>
    <div class="body">
      <div id="chartBox" class="left"></div>
      <div class="right">
        <div>
          <span class="tapBox one"></span>无呼入 78<span class="ass">个</span>
        </div>
        <div>
          <span class="tapBox two"></span>呼叫中 78<span class="ass">个</span>
        </div>
        <div>
          <span class="tapBox three"></span>繁忙中 78<span class="ass">个</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "./Title.vue";
import * as echarts from "echarts";
export default {
  components: {
    Title,
  },
  data() {
    return {
      chartDom: null,
    };
  },
  mounted() {
    //初始化饼图
    this.InitEcarts();
  },
  methods: {
    InitEcarts() {
      this.chartDom = document.getElementById("chartBox");
      let myChart = echarts.init(this.chartDom);
      let option;
      option = {
        title: {
          text: "本月呼叫",
          left: "center",
          textStyle:{
            color:"#FFF"
          },
          top:'0'
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "本月呼叫",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 78, name: "无呼入" },
              { value: 49, name: "呼叫中" },
              { value: 35, name: "繁忙中" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.OneClickCalling {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    flex: 1;
  }
  .body {
    width: 100%;
    flex: 6;
    display: flex;
    align-items: center;
    .left {
      width: 2.422625rem /* 193.81/80 */;
      height: 3rem /* 121.41/80 */;
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 150px /* 193.81/80 */;
      height: 1.517625rem /* 121.41/80 */;
      margin-left: 0.443rem /* 35.44/80 */;
      .tapBox {
        display: inline-block;
        width: 0.157375rem /* 12.59/80 */;
        height: 0.157375rem /* 12.59/80 */;
        border-radius: 0.025rem /* 2/80 */;
        margin-right: 0.068625rem /* 5.49/80 */;
      }
      .one {
        background: rgba(128, 212, 253, 1);
      }
      .two {
        background: rgba(82, 217, 138, 1);
      }
      .three {
        background: rgba(73, 110, 239, 1);
      }
      .ass {
        opacity: 0.6;
        margin-left: 0.093375rem /* 7.47/80 */;
      }
    }
    .right > * {
      // CSS样式
      font-size: 0.20975rem /* 16.78/80 */;
      color: white;
    }
  }
}
</style>
